<template>
  <div class="login indexed" :style='{"background-color": ground_color}'>
      <!-- 导航条 -->
    <div class="tabbar" :style="{background:tabbar_color}">
        <span>小小笔记本</span>
        <div class="others">
            <router-link class="selection" to="/"><i class="el-icon-s-promotion "></i>首页</router-link>
            <router-link class="selection" to="/about"><i class="el-icon-share"></i>关于</router-link>
            <div class="up_input">
                <el-input placeholder="搜索笔记内容" v-model="input" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
        <router-link v-if="not_Login" class="selection" to="/login">&nbsp; 登录</router-link> 
        <router-link v-if="not_Login" class="selection" to="/register">&nbsp; 注册</router-link> 
        <router-link v-if="!not_Login" class="selection" to="/personal_center">
            <img :src="imgUrl.imgUrl" class="head_img selection" v-if="!not_Login" alt="">
            &nbsp;{{ this.name }}
        </router-link>
        </div>
    </div>
    
    <!-- 个人信息 -->
    <div class="drop space_box" :style='{"background-color": background_color}'>
        <h2 class=" space_title">个人中心</h2>
        <div class="personal_space_img" >
            <img :src="imgUrl.imgUrl" @click='editImage' alt="" >
        </div>

        <input id="fileInput" type="file" multiple @change="upload">

        <div class="list_NEIRONG" :style='{"color": font_color}'>
            <div class="center_item">用户名：{{ this.name }}</div>
            <div class="center_item">邮箱： 未验证</div>
            <div class="center_item">QQ： </div>
            <div class="center_item">微信：</div>
        </div>
        <div class="personal_space_button">
            <button class="inner_button" @click="logout">退出登录</button>
            <button class="inner_button" @click="change">切换账号</button>
            <button class="inner_button" @click="register">注册账号</button>
        </div>
    </div>
  </div>
</template>

<script>
import { color,host } from '../../network/color_check.js'
import Qs from 'qs'
import axios from 'axios';
import Cookies from 'js-cookie';

export default {
    'name': 'personal_center',
    date() {
        return {
            not_Login: true,
            name: '',
            imgUrl: {
                'imgUrl': ''
            },

            input: '',
            ground_color: '#f4f4f4', // 背景色 #f4f4f4是原来的颜色，#22303f是暗黑色,
            background_color: 'white', // 元素的背景颜色，white, #18222d!important
            font_color: 'black',
            a_color: 'pink',
            tabbar_color: 'pink',
            write_color: '#eff7ff', // #18222d!important
        }
    },
    created() {
        
        var a = Cookies.get();
        // 遍历cookie的值
        for(let key in a){
            // console.log(key);
            if( a[key] === '1' ) {
                this.not_Login = false;
                this.name = key;
            // console.log('name: ' + this.name);
                break;  
            }
        }
        if( this.name === '' ){
            this.not_Login = color.not_Login;
        }
        
        this.ground_color = color.ground_color;
        this.background_color = color.background_color;
        this.font_color = color.font_color;
        this.tabbar_color = color.tabbar_color;
        this.a_color= color.a_color;
        this.write_color = color.write_color;
        this.value = color.value;
        this.input = '';  
        this.imgUrl = {
            'imgUrl' : ''
        }
        // 获取头像
        if( Cookies.get('img_url') ) {
            this.imgUrl.imgUrl = Cookies.get('img_url');
        } else {
            this.getImgUrl(); 
        }
    },
    methods: {
        // 获取头像的地址
        getImgUrl() {
            // 查找cookie中有没有url的链接
            if( Cookies.get('img_url') ) {
                this.imgUrl.imgUrl = Cookies.get('img_url');
                return ;
            }
            // 如果没有
            axios({
                url:  host.url+'/Users/getImage/' + this.name + '.htm',
                method: 'get',
            })
            .then(suc => {
                // 写入cookie
                this.imgUrl.imgUrl = suc.data.data;
                Cookies.set('img_url', suc.data.data);
            })
            .catch( fail => {
                console.log(fail);
                this.$message.error('获取头像出错了');
            })
        },
        editImage() {
            this.$message.warning("注意图片的命名不能有中文哦^_^,如果图片未显示请刷新页面！");
            var fileInput = document.getElementById("fileInput");
			fileInput.click();
        },
        upload(e){
            // 判断每个元素的type属性是否为图片形式
            if (!/image\/\w+/.test(e.target.files[0].type)) {
                alert("只能选择图片");
                return;
            }
            var file = '';
            let reader = new FileReader();
                // readAsDataURL方法可以将上传的图片格式转为base64,然后在存入到图片路径, 
            reader.readAsDataURL(e.target.files[0]);
            //文件读取成功完成时触发
            var _this = this;
            reader.addEventListener('load', function(){
                //  reader.result返回文件的内容,base64
                file = this.result;
                axios({
                url:  host.url+'/Users/commit_image.htm',
                method: 'post',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'},
                    data: {
                        image: file,
                        username: _this.name,
                        image_name: e.target.files[0].name
                    },
                    transformRequest: [function (data) {
                        data = Qs.stringify(data);
                        return data;
                    }],
                })
                .then(suc => {
                    if(suc.data.code === 200) {
                        // console.log(suc.data.data);
                        _this.imgUrl.imgUrl = suc.data.data;
                        // 将cookie中的img_url重新赋值
                         axios({
                            url:  host.url+'/Users/getImage/' + _this.name + '.html',
                            method: 'get',
                        })
                        .then(succ => {
                            _this.imgUrl.imgUrl = succ.data.data;
                            _this.$router.replace('/');
                            Cookies.set('img_url', succ.data.data);
                        })
                        .catch( fail => {
                            console.log(fail);
                            _this.$message.error('上传头像后重新获取头像失败了');
                        })
                        
                    } else if (suc.data.code === 0) {
                        _this.$message.error('上传头像出错了');
                    }
                })
                .catch(fail => {
                    console.log(fail);          
                    _this.$message.error('上传头像时服务器出错了');
                });
            })  

            
        },
        // 退出登录
        logout() {
            // 1，删除cookie
            Cookies.remove(this.name);
            Cookies.remove('img_url');
            this.$message({
                message: '退出登录成功！',
                type: 'success'
            });
            this.$router.replace({path: '/'});
        },
        change() {
            // 1，删除cookie
            Cookies.remove(this.name);
            Cookies.remove('img_url');
            this.$router.replace({path: '/login'});
        },
        register() {
            // 1，删除cookie
            Cookies.remove(this.name);
            Cookies.remove('img_url');
            this.$router.replace({path: '/register'});
        }
    }
}
</script>

<style>
#fileInput {
    display: none;
}
.personal_space_img {
    width: 70px; 
    height:70px; 
    /* background-color: green; */
    display: flex;
    justify-content: center;
    margin: 0 auto;
    border: 3px solid whitesmoke;
    border-radius: 5px;
    margin-top: 30px;
    margin-bottom: 20px;
}
.personal_space_button {
    display: flex;
    justify-content: space-evenly;
    width: 90%;
    margin: 0 auto;
    border-top: 1px solid gray;
    margin-top: -30px;
    padding-top: 30px;
    font-family: "微软雅黑";
    font-size: 13px;
}
.personal_space_button .inner_button {
    width: 17%;
    background-color: #17a2b8!important;
    color: white;
    height: 30px;
}
.center_item {
    height: 20%;
    display: flex;
    align-items: center;
    font-size: 16px;
    width: 60%;
    margin: 0px auto;
}
.list_NEIRONG {
    
    font-weight: 400!important;
    height: 60%;
    /* display: flex; */
    align-items: center;
}
.space_title {
    width: 100%;
    margin-top: -20px;

    display: flex;
    justify-content: center;
    font-size: 18px;
    font-weight: 700!important;
    color: #17a2b8!important;
}
.space_box {
    width: 35%;
    height: 550px;;
    margin: 70px auto;
}
.indexed {
    font-family:  -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    width:100%;
    height: 100%;
    position: absolute;
}
.drop {
  padding-top: 50px;
}
</style>